import React, { Suspense, lazy } from 'react';
import { HashRouter, Switch, Route } from 'react-router-dom';
//import createBrowserHistory from 'history/createBrowserHistory';

//路由的全局控制
import PrivateRoute from "./PrivateRoute";

import Home from "../pages/Home.jsx";

// 使用路由懒加载
const ExampleList1 = lazy(() => import( /*webpackChunkName: "router-ExampleList1"*/  '../pages/ExampleList1/index.jsx') );
const ExampleList2 = lazy(() => import( /*webpackChunkName: "router-ExampleList2"*/  '../pages/ExampleList2/index.jsx') );
const Login = lazy(() => import( /*webpackChunkName: "router-Login"*/  '../pages/Login/Login.jsx') );

//note 学习笔记
const NoteA01 = lazy(() => import( /*webpackChunkName: "router-NoteA01"*/  '../pages/NoteA/NoteA01/NoteA01.jsx') );
const NoteA02 = lazy(() => import( /*webpackChunkName: "router-NoteA02"*/  '../pages/NoteA/NoteA02/NoteA02.jsx') );
const NoteA03 = lazy(() => import( /*webpackChunkName: "router-NoteA03"*/  '../pages/NoteA/NoteA03/NoteA03.jsx') );
const NoteA04 = lazy(() => import( /*webpackChunkName: "router-NoteA04"*/  '../pages/NoteA/NoteA04/NoteA04.jsx') );
const NoteA05 = lazy(() => import( /*webpackChunkName: "router-NoteA05"*/  '../pages/NoteA/NoteA05/NoteA05.jsx') );

//css3 动画
const Css3A01 = lazy(() => import( /*webpackChunkName: "router-Css3A01"*/  '../pages/Css3A/Css3A01/Css3A01.jsx') );
const Css3A02 = lazy(() => import( /*webpackChunkName: "router-Css3A02"*/  '../pages/Css3A/Css3A02/Css3A02.jsx') );
const Css3A03 = lazy(() => import( /*webpackChunkName: "router-Css3A03"*/  '../pages/Css3A/Css3A03/Css3A03.jsx') );
const Css3A04 = lazy(() => import( /*webpackChunkName: "router-Css3A04"*/  '../pages/Css3A/Css3A04/Css3A04.jsx') );
const Css3A05 = lazy(() => import( /*webpackChunkName: "router-Css3A05"*/  '../pages/Css3A/Css3A05/Css3A05.jsx') );

//不需要登录权限的路由
const layoutRouter1 = [
    { path:"/", component: Home,},
    { path:"/Home", component: Home,},
    { path:"/Login", component: Login,},
];
//需要登录权限限制的路由
const layoutRouter2 = [
    { path:"/ExampleList1", component: ExampleList1,},
    { path:"/ExampleList2", component: ExampleList2,},
];
const otherRouter = [
    { path:"/NoteA/NoteA01", component: NoteA01,},
    { path:"/NoteA/NoteA02", component: NoteA02,},
    { path:"/NoteA/NoteA03", component: NoteA03,},
    { path:"/NoteA/NoteA04", component: NoteA04,},
    { path:"/NoteA/NoteA05", component: NoteA05,},

    { path:"/Css3A/Css3A01", component: Css3A01,},
    { path:"/Css3A/Css3A02", component: Css3A02,},
    { path:"/Css3A/Css3A03", component: Css3A03,},
    { path:"/Css3A/Css3A04", component: Css3A04,},
    { path:"/Css3A/Css3A05", component: Css3A05,},
];


function RouteConfig (props) {
    return(
        <>
            <HashRouter>
                <Suspense fallback={<div>Loading...</div>}>
                    <Switch>
                        { layoutRouter1.map(item => <Route exact path={item.path}  component={item.component} key={item.path}/>) }
                        { layoutRouter2.map(item => <PrivateRoute exact path={item.path}  component={item.component} key={item.path}/>) }
                        { otherRouter.map(item => <Route exact path={item.path}  component={item.component} key={item.path}/>) }
                    </Switch>
                </Suspense>
            </HashRouter>
        </>
    )
};

export default RouteConfig